<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /圈子详情 开始 -->
    <section class="container">
      <div>
        <Card :bordered="false" :style="'background:' + color">
          <Spin fix v-if="spinShow"></Spin>
          <Row>
            <Col
              class="titleClass"
              :xs="{ span: 24, offset: 0 }"
              :sm="{ span: 18, offset: 1 }"
              :md="{ span: 12, offset: 1 }"
              :lg="{ span: 8, offset: 2 }"
            >
              <section class="container">
                <section class="path-wrap txtOf hLh30">

                

                </section>

                <!-- /课程封面介绍 -->
                <div class="mt20 c-infor-box">
                  <article class="fl col-7">
                    <section class="mr30">
                      <div class="i-box">
                        <div>
                          <section
                            id="c-i-tabTitle"
                            class="c-infor-tabTitle c-tab-title"
                          >
                            <a name="c-i" class="current" title="课程详情"
                              >课程详情</a
                            >
                          </section>
                        </div>
                        <article class="ml10 mr10 pt20">
                          <div>
                            <h6 class="c-i-content c-infor-title">
                              <span>课程介绍</span>
                            </h6>
                            <div class="course-txt-body-wrap">
                              <section class="course-txt-body">
                                <p v-html="coursetest.description">
                                  {{ coursetest.description }}
                                </p>
                              </section>
                            </div>
                          </div>
                          <!-- /课程介绍 -->
                        </article>
                      </div>
                    </section>
                  </article>

                  <div class="clear"></div>
                </div>
              </section>
            </Col>

            <Col
              :xs="{ span: 24, offset: 0 }"
              :sm="{ span: 18, offset: 1 }"
              :md="{ span: 12, offset: 1 }"
              :lg="{ span: 8, offset: 5 }"
              class="rightDiv"
            >
              <div>({{ courseWebVo.scoreperson }}人参与了评价)</div>
              <div>
                五星:
                <Progress
                  :percent="Number.parseFloat(fivestar)"
                  :stroke-color="['#108ee9', '#87d068']"
                  style="width: 300px"
                />
                <span style="font-size: 8px"
                  >({{ courseWebVo.fivestar }}人)</span
                >
              </div>
              <div>
                四星:
                <Progress
                  :percent="Number.parseFloat(fourstar)"
                  :stroke-color="['#108ee9', '#87d068']"
                  style="width: 300px"
                />
                <span style="font-size: 8px"
                  >({{ courseWebVo.fourstar }}人)</span
                >
              </div>
              <div>
                三星:
                <Progress
                  :percent="Number.parseFloat(threestar)"
                  :stroke-color="['#108ee9', '#87d068']"
                  style="width: 300px"
                />
                <span style="font-size: 8px"
                  >({{ courseWebVo.threestar }}人)</span
                >
              </div>
              <div>
                二星:
                <Progress
                  :percent="Number.parseFloat(twostar)"
                  :stroke-color="['#108ee9', '#87d068']"
                  style="width: 300px"
                />
                <span style="font-size: 8px"
                  >({{ courseWebVo.twostar }}人)</span
                >
              </div>
              <div>
                一星:
                <Progress
                  :percent="Number.parseFloat(onestar)"
                  :stroke-color="['#108ee9', '#87d068']"
                  style="width: 300px"
                />
                <span style="font-size: 8px"
                  >({{ courseWebVo.onestar }}人)</span
                >
              </div>
              <Button
                type="success"
                icon="ios-brush"
                size="small"
                class="commentBtn"
                @click="commentModal = true"
                >写评价
              </Button>
              <Button
                type="info"
                icon="ios-chatbubbles"
                size="small"
                class="commentBtn"
                style="margin-left: 10px"
                @click="addTopicModal = true"
                >发起话题
              </Button>
              <Modal width="70%" :mask-closable="false" v-model="commentModal">
                <p slot="header" style="text-align:center">
                  <Icon type="ios-brush"></Icon>
                  <span>写评价</span>
                </p>
                <Form  :model="commentForm" ref="commentForm">
                  <FormItem prop="addCourseScore">
                    <div style="margin:10px 40%;font-size:13px ">
                      <span>评分:</span>
                      <Rate v-model="commentForm.addCourseScore" />
                    </div>
                  </FormItem>
                  <FormItem prop="addCourseComment">
                    <quill-editor
                      v-model="commentForm.addCourseComment"
                      ref="commentRef"
                    >
                    </quill-editor>
                  </FormItem>
                </Form>
                <div slot="footer">
                  <Button
                    type="primary"
                    @click="submitComment"
                    :disabled="commentForm.addCourseComment === ''"
                    >提交
                  </Button>
                  <Button @click="commentModal = false">取消</Button>
                </div>
              </Modal>
              
              <!--发起话题开始-->
              <Modal v-model="addTopicModal" :mask-closable="false" width="50%">
                <p slot="header" style="text-align:center">
                  <Icon type="ios-chatbubbles"></Icon>
                  <span>发起一个话题</span>
                </p>
                <div style="text-align:center">
                  <Form  :model="topicForm" ref="topicForm" label-position="left">
                    <FormItem label="标题:" :label-width="50">
                      <Input
                        v-model="topictitle"
                        placeholder="请填写标题..."
                        maxlength="50"
                      />
                    </FormItem>
                    <FormItem label="描述:" :label-width="50">
                      <Input
                        v-model="topicdescribe"
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 10 }"
                        placeholder="请填写话题描述..."
                        maxlength="400"
                      />
                    </FormItem>
                  </Form>
                </div>
                <div slot="footer">
                  <Button
                    type="primary"
                    @click="submitTopic('topicForm')"
                    :disabled="topictitle === '' || topicdescribe === ''"
                    >提交
                  </Button>
                  <Button @click="addTopicModal = false">取消</Button>
                </div>
              </Modal>
               <!--发起话题结束-->
            </Col>
          </Row>

          <!--圈子管理员开始-->
          <Row>
            <aside class="fl col-3">
              <div class="i-box">
                <div>
                  <section class="c-infor-tabTitle c-tab-title">
                    <a title href="javascript:void(0)">圈子管理员</a>
                  </section>
                  <section class="stud-act-list">
                    <ul style="height: auto;">
                      <li>
                        <div class="u-face">
                          <a href="#">
                            <!-- <img :src="courseWebVo.avatar" width="50" height="50" alt> -->
                          </a>
                        </div>
                        <section class="hLh30 txtOf">
                          <a class="c-333 fsize16 fl" href="#">{{
                            courseWebVo.teacherName
                          }}</a>
                        </section>
                      </li>
                    </ul>
                  </section>
                </div>
              </div>
            </aside>
          </Row>
           <!--发起话题开始-->

          <!--课程评价列表开始-->
          <Row class="smallTitleLayout" v-show="commentList.length > -1">
            <Col class="titleClass" :xs="0" :sm="0" :md="1" :lg="2"></Col>
            <Col :xs="24" :sm="16" :md="13" :lg="13"
              ><span class="smallTitle">{{ courseWebVo.title }}的评价:</span>
              <Divider />
            </Col>
          </Row>
          <Row
            class="commentRow"
            v-for="(comment, index) in commentList"
            :key="index"
            v-show="commentList.length > -1"
          >
            <Col class="titleClass" :xs="0" :sm="0" :md="1" :lg="2"></Col>
            <Col :xs="24" :sm="16" :md="13" :lg="13">
              <span @click="toUserInfo(comment.userId)"
                ><Avatar :src="comment.userimg" class="clickClass"
              /></span>
              <span
                class="clickClass commentNameLayout"
                @click="toUserInfo(comment.userId)"
                >{{ comment.username }}</span
              >
              <Rate
                class="commentRate"
                allow-half
                v-model="comment.score"
                disabled
              >
              </Rate>
              <span class="dateClass">
                <Icon type="md-time"/> <Time :time="comment.date"
              /></span>
              <div class="likevalueClass">
                <Icon
                  size="15"
                  type="ios-thumbs-up-outline"
                  class="activeLikeValue"
                  @click="addLikeValue(comment.commentid)"
                />
                <span>{{ comment.likevalue }}</span>
              </div>
              <div class="comment" v-html="comment.comment"></div>
              <Divider />
            </Col>
          </Row>
          <Row class="commentRow" v-show="commentList.length > -1">
            <Col class="titleClass" :xs="0" :sm="0" :md="1" :lg="2"></Col>
            <Col :xs="24" :sm="16" :md="13" :lg="13">
              <Page
                style="margin-top: 15px"
                show-total
                :total="this.pageForm.total"
                size="small"
                show-elevator
                show-sizer
                :page-size="5"
                :page-size-opts="[2, 5, 10, 20]"
                @on-change="handleCurrentChange"
                @on-page-size-change="handleSizeChange"
              />
            </Col>
          </Row>
          <!--课程评价列表结束-->

          <!--课程话题列表开始-->        
          <Row v-show="topicList.length > -1" style="margin-top:80px">
            <Col class="titleClass" :xs="0" :sm="0" :md="1" :lg="2"></Col>
            <Col :xs="24" :sm="16" :md="13" :lg="13"
              ><span class="smallTitle">{{ courseWebVo.title }}的话题:</span>
              <Divider />
            </Col>
          </Row>
          <Row v-show="topicList.length > -1">
            <Col class="titleClass" :xs="0" :sm="0" :md="1" :lg="2"></Col>
            <Col :xs="24" :sm="16" :md="13" :lg="13">
              <Card :style="'background:' + color">
                <List item-layout="vertical">
                  <ListItem v-for="(topic, index) in topicList" :key="index">
                    <ListItemMeta slot="header" />
                    <slot name="header">
                      <div class="ivu-list-item-meta">
                        <div
                          class="ivu-list-item-meta-avatar clickClass"
                          @click="toUserInfo(topic.userId)"
                        >
                          <Avatar
                            class="activeLikeValue "
                            :src="topic.userimg"
                          ></Avatar>
                        </div>
                        <div class="ivu-list-item-content">
                          <div
                            class="ivu-list-item-meta-title"
                            @click="toUserInfo(topic.userId)"
                          >
                            {{ topic.username }}
                          </div>
                          <div class="ivu-list-item-meta-description">
                            <Icon type="md-time" />
                            <Time :time="topic.topicdate" />
                          </div>
                        </div>
                      </div>
                    </slot>
                    <div class="clickClass" @click="toTopicContent(topicId)">
                      <div style="text-align: center;font-size: 20px">
                        {{ topic.topictitle }}
                      </div>
                      <div
                        style="font-size:13px;margin-top: 10px;text-align: center"
                      >
                        {{ topic.topicdescribe }}
                      </div>
                    </div>
                    <template slot="extra">
                      <Tooltip
                        :content="topic.coursename"
                        placement="right"
                        theme="light"
                      >
                        <img
                          :src="topic.courseimg"
                          style="height: 120px;margin-top:50%"
                        />
                      </Tooltip>
                    </template>
                  </ListItem>
                </List>
              </Card>
            </Col>
          </Row>
          <!--课程列表结束-->
        
        </Card>
      </div>
    </section>

    <!-- /圈子详情 结束 -->
  </div>
</template>

<script>
import courseApi from "@/api/course";
import groupApi from "@/api/group";
//import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器

export default {
  //params.id获取课程路径id值
  asyncData({ params, error }) {
    return { courseId: params.id };
  },
  //params.id获取圈子路径id值
  asyncData({ params, error }) {
    return groupApi.getGroupInfo(params.id).then(response => {
      return {
        groupId: params.id,
        group: response.data.data.group
      };
    });
  },

  data() {
    return {
      
      courseWebVo: {},
      commentList: [],
      topicList: [],

      commentModal: false,
      data:{
      total: 1, 
    coursetest:
    {
      "courseId": "11",
      "cover": 'https://guli-file-190513.oss-cn-beijing.aliyuncs.com/cover/default.gif',
      "description": "111",
      "stuNum": 11,
      "teacherId": "11",
      "teacherName": "11",
      "semester": "秋季",
      "title": "java基础课程：test",
      "tag": "软件工程"
    },

      },  //课程列表
      commentForm: {
        addCourseScore: 1,
        addCourseComment: ""
      },
      topicForm:{
        topictitle: "",
        topicdescribe: "",
      },
      pageForm: {
        current: 1,
        size: 5,
        total: 0
      },
      spinShow: false,
      addTopicModal: false,
      
      color: "#fff"
    };
  },

  //在页面渲染之前执行 
  created() {
    this.initCourseInfo();
    this.initGroupInfo();
  },

  methods: {
    //获取课程信息
    initCourseInfo() {
      courseApi.getFrontCourseInfo(this.courseId).then(response => {
        this.courseWebVo = response.data.data.courseWebVo;
      });
    },
    //获取圈子信息 
    initGroupInfo() {
      groupApi.getGroupInfo(this.groupId).then(response => {
        this.commentList = response.data.data.commentList;
        this.topicList = response.data.data.topicList;
        this.commentList = response.data.data.commentList;
        this.topicList = response.data.data.topicList;
      });
    },
    //进入话题详情
    toTopicContent: function(topicId) {
      this.$router.push({
        path: "/topic/",
        query: { topicId: topicId }
      });
    },

    //话题提交的方法 
    submitTopic(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          topicApi.topicMember(this.params).then(response => {
            let topicInfo = response.data;
            if (topicInfo.success) {
              this.$message({
                type: "success",
                message: "发布话题成功成功"
              });
              this.addTopicModal = false;
              this.getGroupInfo(this.groupId);
              groupApi.getTopicList().then(response => {
                this.topicList = response.data.data;
                this.$router.push({
                  path: "/group/",
                  query: { groupId: groupId }
                });
              });
            } else {
              this.$message({
                type: "error",
                message: "发布话题失败"
              });

              this.params.courseId = "";
              this.params.userId = "";
              this.params.topictitle = "";
              this.params.topicdescribe = "";
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

       //评论提交的方法
       submitComment(formName) {
        this.$refs[formName].validate((valid) => {
          if(valid){  
            groupApi.submitComment(this.params)
            .then(response => {
              let commentInfo = response.data
              if (commentInfo.success) {
                this.$message({
                  type: 'success',
                  message: "评论提交成功"
                })
                groupApi.getCommentList().then(response => {
                this.commentList = response.data.data;
                this.$router.push({
                  path: "/group/",
                  query: { groupId: groupId }
                });
              });
              }
              else {
                this.$message({
                  type: 'error',
                  message: "评论提交失败"
                })
                this.params.courseid = ''
                this.params.comment = ''  
                this.params.score = ''
              }
            })
          }
          else{
            console.log('error submit!!');
            return false;
          }
        }) 
       },



    //课程评论点赞
    //addLikeValue: function(id) {
    //  let commentid = this.$qs.stringify({ commentid: id });
    //  this.$axios
    //    .post("/customer/addCommentLike", commentid)
    //    .then(res => {
    //      if (res.data.data) {
    //        this.getCourseInfo();
    //      } else {
    //        this.$Message.error("点赞失败");
    //      }
    //    })
    //    .catch(err => {
    //      console.log(err);
    //    });
    //},
    
    toUserInfo: function(userId) {
      this.$router.push({ path: "/userInfo", query: { userId: userId } });
    },
    handleCurrentChange: function(current) {
      this.pageForm.current = current;
      this.getCourseInfo();
    },
    handleSizeChange: function(size) {
      this.pageForm.size = size;
      this.getCourseInfo();
    }
  }
};
</script>

<style lang="less" scoped>
.ivu-card {
  margin: 20px;

  .introCard {
    margin: 8%;
  }

  .courseTitle {
    margin-bottom: 4%;
  }
}

.clickClass {
  cursor: pointer;
}

span.clickClass:hover {
  color: #3399ff;
}

div.clickClass:hover {
  color: #3399ff;
}


.commentNameLayout {
  margin-left: 1%;
}

.smallTitle {
  font-size: 20px;
}

.smallTitleLayout {
  margin-top: 3%;
}

.collectBox {
  margin-top: 3%;
}

.titleClass {
  margin-top: 2%;
}

.rightDiv {
  margin-top: 12%;
}

.commentBtn {
  width: 150px;
  margin-top: 5%;
}

.actorname {
  width: 150px;
  text-align: center;
}

.position {
  width: 150px;
  text-align: center;
}

.commentRate {
  font-size: 13px;
  margin-left: 1%;
}

.comment {
  margin-top: 1%;
  font-size: 13px;
}

.dateClass {
  margin-left: 1%;
  font-size: 10px;
  color: #aaa;
}

.likevalueClass {
  margin-left: 90%;

  span {
    font-size: 13px;
    margin-left: 1%;
    color: #aaa;
  }
}

.activeLikeValue {
  cursor: pointer;
}

i.activeLikeValue:hover {
  color: red;
}
</style>
